<template>
  <div class="query-side">
    <div class="query-input">
      <el-input
        prefix-icon="el-icon-search"
        placeholder="Type something"
        size="default"
        v-model="queryFieldInput"
      >
      </el-input>
    </div>

    <div class="query-field">
      <div class="field-group">
        <div class="group-title">
          <span>已选字段</span>
          <span class="group-count">{{ selectedFields.length }}</span>
        </div>

        <div
          v-for="item in selectedFields"
          :key="item.id"
          class="field-item"
          @click="removeField(item)"
        >
          <span class="en-name">
            {{ item.fieldEnName }}
          </span>
          :
          <span class="zh-name">
            {{ item.fieldZhName }}
          </span>
        </div>
      </div>

      <div class="field-group">
        <div class="group-title">
          <span> 可选字段 </span>
          <span class="group-count">{{ availableFields.length }}</span>
        </div>
        <div
          v-for="item in availableFields"
          :key="item.id"
          class="field-item"
          @click="addField(item)"
        >
          <span class="en-name">
            {{ item.fieldEnName }}
          </span>
          :
          <span class="zh-name">
            {{ item.fieldZhName }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'querySide',
  props: ['allFields', 'selectedFields'],
  data() {
    return {
      queryFieldInput: '',
    };
  },
  computed: {
    availableFields() {
      let fields = this.allFields.filter(x =>
        this.selectedFields.every(y => y.id !== x.id)
      );

      if (this.queryFieldInput && this.queryFieldInput.length > 0) {
        fields = fields.filter(
          x =>
            (x.fieldEnName
              ? x.fieldEnName.indexOf(this.queryFieldInput) > -1
              : true) ||
            (x.fieldZhName
              ? x.fieldZhName.indexOf(this.queryFieldInput) > -1
              : true)
        );
      }

      return fields;
    },
  },
  created() {
    // console.log(this.availableFields);
  },
  methods: {
    addField(item) {
      this.$emit('addField', item);
    },
    removeField(item) {
      this.$emit('removeField', item);
    },
  },
};
</script>

<style scoped>
.query-side {
  height: 100%;
  background-color: #fafbfd;
  width: 300px;
  padding: 0px 10px 10px 10px;
}

.query-input {
  margin: 5px 0px 10px 0px;
}

.query-field {
  height: 100%;
  overflow: scroll;
}

.field-group {
  margin-bottom: 10px;
}

.group-title {
  width: 100%;
  font-size: 18px;
  margin: 3px 0px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}

.group-count {
  width: 20px;
  height: 20px;
  background-color: #e0e5ee;
  border-radius: 5px;
  text-align: center;
}

.field-item {
  padding-left: 15px;
  margin: 3px 0px;
  width: 100%;

  /* padding-left: 15px;
  margin: 5px 0px;
  height: 30px;
  width: 100%;
  border: solid 1px #eee;
  border-radius: 6px;
  background-color: #fff; */
}

.en-name {
  font-size: 14px;
}

.zh-name {
  font-size: 12px;
}
</style>
